<template>
  <div style="width: 100%;">
    <el-table :data="list"  @selection-change="handleSelectionChange"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              size="small"
              align="center"
              header-align="center"
              style="width: 100%"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              highlight-current-row stripe>

      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="merchantName" label="商户名称" width="100">
         <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
      <!--v-if="scope.row.orderStatus =='1'"-->
      <el-table-column prop="orderCode" label="订单编号"  width="230">
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.orderNo}}</span>-->
        <!--</template>-->
        <template slot-scope="scope">
          <router-link
            :to="{path:'/OrderDetail/'+scope.row.orderNo}">
            <el-link type="primary">{{scope.row.orderNo}}</el-link>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="orderDate" label="下单日期" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderType" label="订单类型" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseMethod" label="购买方式" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
       <el-table-column prop="sourceChannel" label="来源渠道" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
        <el-table-column prop="orderSource" label="订单来源" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="commodityType" label="商品类型" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tradeName" label="商品名称" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName}}</span>
        </template>
      </el-table-column>
     <!--  <el-table-column  label="交货单号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品编码" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.goodsId}}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="orderStatus" label="订单状态"  width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus =='3'">待发货</span>
          <span v-if="scope.row.orderStatus =='4'">已发货</span>
        </template>
      </el-table-column>

    <!--   <el-table-column prop="orderCreateTime" label="订单创建时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.buyTime}}</span>
        </template> 
      </el-table-column>-->
      <el-table-column prop="shippingStatus" label="发货状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus =='3'">待发货</span>
          <span v-if="scope.row.orderStatus =='4'">已发货</span>
        </template>
      </el-table-column>

      <el-table-column prop="seller" label="收货人详情" width="100" >
        <!--<template slot-scope="scope">-->
          <!--<span>姓名：{{ scope.row.receiverName}} 手机：{{ scope.row.receiverPhone}} 收货地址：{{ scope.row.receiverProvinceName}}{{ scope.row.receiverCityName}}{{ scope.row.receiverRegionName}}{{ scope.row.receiverAddress}}</span>-->
        <!--</template>-->
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.receiverName }}</p>
            <p>手机: {{ scope.row.receiverPhone }}</p>
            <p>收货地址:{{ scope.row.receiverProvinceName}}{{ scope.row.receiverCityName}}{{ scope.row.receiverRegionName}}{{ scope.row.receiverAddress}}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.receiverName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作"  fixed="right">
        <template slot-scope="scope"  >
          <!-- <el-button size="mini" @click="delivery(scope.row)" v-if="scope.row.orderStatus =='3'">发货</el-button> -->
          <el-button size="mini" @click="check(scope.row)" v-if="scope.row.orderStatus =='3'">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest" :current-page="filters.pageNo"
        :page-size="filters.pageSize" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },

    // 子组件要显式的用 props 选项声明它预期的数
    props: {
      type: {
        type: String,
        default: null
      },
      parentFilters: {
        type: Object
      }
    },

    data() {
      return {
        totalSize: 0,
        // 分页信息
        filters: {
          "start":"1",
          "limit":10,
          "orderStatus":0
        },

        list: [],
        apiList: [],

        listQuery: {
          page: 1,
          limit: 5,
          type: this.type,
          sort: '+id'
        },
        loading: false,
        multipleSelection:[]
      }
    },
    created() {
      if(this.$route.query.tab != "undefined" && this.$route.query.tab != ""){
        this.filters.orderStatus = this.$route.query.tab;
      }
    },
    mounted(){
      this.refreshPageRequest(1);
    },
    methods: {

        /**
         * 查看
         * */
      check(row) {
        this.$emit("check", {row: row});
      },
      /**
       * 发货
       * */
      delivery(row){
          this.$emit("check",{row:row})
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.filters.pageNo = 1;
        this.filters.pageSize = pageSize;
        this.setList();
      },

      /**
       * 设置列表
       */
      setList: function () {
        this.loading = true;
        let _filters = JSON.parse(JSON.stringify(this.parentFilters));

        _filters['start'] = this.filters.pageNo;
        _filters['limit'] = this.filters.limit;

        let this_ = this;
        if(this.filters.orderStatus === 0){
          this.filters.orderStatus=null;
        }
        _filters['orderStatus'] = this.filters.orderStatus;
        this.utils.request.deliverManagerQueryPage(_filters, function(res) {
          if(res.code ==="0000") {
            this_.list = res.data.rows;
            this_.totalSize = Number(res.data.total);
          }
        });
        this.loading = false;
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.filters.pageNo = pageNum;
        this.setList();
      },

      //查看
      seeNewTab: function(id) {
        this.$router.push("/GroupDetailPromotion?id=" + `${id}`);
      },
      //复制
      copyBtnShow: function(id) {
        let that = this;
        this.filters.id = id;
        this.utils.request.grouponCopy(this.filters, function(res) {
          if(res.code =="0000") {
            that.filters.id = null;
            that.setList();
          }
        });
      },
      //关闭
      closeActivity: function(id) {
        this.$confirm("是否确认关闭活动？", "提示", {
          type: "warning"
        })
          .then(() => {
            let callback = res => {
              if (res.code == "0000") {
                this.setList();
                this.$message({message: "活动已关闭 ", type: "success"});
              } else {
                this.$message({message: "操作失败, " + res.message, type: "error"});
              }
              this.loading = false;
            };

            var param = {};
            param.id = id;
            this.utils.request.patchGrouponClose(param, callback);
          })
          .catch(() => {
          });

      },
      deleteActivity: function(row) {
        var this_ = this;

        this.$confirm("是否确认删除活动？", "提示", {
          type: "warning"
        })
          .then(() => {

            let callback = res => {
              if (res.code == "0000") {
                this.$message({message: "删除成功", type: "success"});
                this.setList();
              } else {
                this.$message({message: "操作失败, " + res.message, type: "error"});
              }
              this.loading = false;
            };

            var param = {};
            param.id = row.id;
            this.utils.request.patchGrouponDelete(param, callback);

          })
          .catch(() => {
          });
      },
      updateBtnShow: function(id) {
        //编辑拼团活动
        this.$router.push("/GroupActivityComponents?auth=1&id="+id);
      },
      //追加商品
      appendsuperadminProduct: function() {

      },
      //查看营销报告
      viewMarketingReport: function() {
        this.$router.push("/MarketingReport");
      },
    }
  }
</script>

